/<template>
  <div>
      <Banner :bannerList="bannerList"></Banner>
      <List :listLen="list.length" :total="total" @onLoad="handleLoad" @onRefreshList="handelRefresh">
          <van-cell class="item" v-for="item in list" :key="`${item.id}${Date.now()}`" :title="item.name" />
      </List>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import Banner from '@/components/Banner'
import List from '@/components/List'
export default {
    components: {
        Banner,
        List,
    },
    mounted() {
        this.getList()
    },
    computed: {
        ...mapState(['list', 'bannerList', 'total'])
    },
    methods: {
        ...mapActions(['getList', 'loadMore']),
        handleLoad() {
            this.loadMore()
        },
        async handelRefresh() {
            await this.getList()
        },
    }
}
</script>

<style>
.item {
    height: 200px;;
}
</style>